<template>
    <div>
        <div style="background-color: #fce4ec; padding: 15px; margin-bottom: 20px; border-radius: 8px; border-left: 4px solid #E91E63;">
            <h3 style="color: #C2185B; margin-top: 0;">👁️ 技术解释：侦听器基础用法</h3>
            <p><strong>侦听器 (Watch)：</strong>用于监听数据变化并执行相应的副作用操作，如日志记录、API调用、数据验证等。</p>
            <p><strong>deep 深度监听：</strong>设置为true时可以监听对象内部属性的变化，适用于复杂数据结构的监听。</p>
            <p><strong>immediate 立即执行：</strong>设置为true时会在组件初始化时立即执行一次侦听器函数。</p>
            <p><strong>新旧值对比：</strong>侦听器函数接收newValue和oldValue参数，可以对比数据变化前后的状态。</p>
        </div>

        <div style="padding: 20px; background-color: #f5f5f5; border-radius: 8px;">
            <h3>侦听器演示</h3>
            <div style="margin-bottom: 15px;">
                <label>输入消息 (会触发侦听器):</label>
                <input 
                    v-model="message" 
                    type="text" 
                    style="margin-left: 10px; padding: 8px; border: 1px solid #ddd; border-radius: 4px;"
                    placeholder="修改这里的文字试试"
                />
            </div>
            <p><strong>当前消息:</strong> {{ message }}</p>
            <p><strong>变化次数:</strong> {{ changeCount }}</p>
            <div style="background-color: #e8f5e8; padding: 10px; border-radius: 4px; margin-top: 10px;">
                <p><strong>最后一次变化:</strong></p>
                <p>旧值: {{ lastOldValue }}</p>
                <p>新值: {{ lastNewValue }}</p>
            </div>
        </div>
    </div>
</template>
<script>
export default{
    data() {
        return {
            message: 'hello',
            changeCount: 0,
            lastOldValue: '',
            lastNewValue: ''
        };
    },
    watch:{
        message: {
            handler(newValue, oldValue) {
                console.log("message changed", newValue, oldValue);
                this.changeCount++;
                this.lastOldValue = oldValue;
                this.lastNewValue = newValue;
            },
            deep: true,
            immediate: true
        }
    }
}
</script>